<html class="no-js" lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>Dashboard V.1 | Kiaalap - Kiaalap Admin Template</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- favicon
		============================================ -->
    <link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico">
    <!-- Google Fonts
		============================================ -->
    <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,700,900" rel="stylesheet">
    <!-- Bootstrap CSS
		============================================ -->
    <link rel="stylesheet" href="css/bootstrap.min.css">

    <!-- Lobibox CSS
        ============================================ -->
    <link rel="stylesheet" href="css/notifications/Lobibox.min.css">

    <!-- Bootstrap CSS
		============================================ -->
    <link rel="stylesheet" href="css/font-awesome.min.css">


    <!-- DatetimePicker CSS
        ============================================ -->
    <link rel="stylesheet" href="css/datetimepicker/bootstrap-datetimepicker.min.css">

    <!-- owl.carousel CSS
		============================================ -->
    <link rel="stylesheet" href="css/owl.carousel.css">
    <link rel="stylesheet" href="css/owl.theme.css">
    <link rel="stylesheet" href="css/owl.transitions.css">
    <!-- animate CSS
		============================================ -->
    <link rel="stylesheet" href="css/animate.css">
    <!-- normalize CSS
		============================================ -->
    <link rel="stylesheet" href="css/normalize.css">
    <!-- meanmenu icon CSS
		============================================ -->
    <link rel="stylesheet" href="css/meanmenu.min.css">
    <!-- main CSS
		============================================ -->
    <link rel="stylesheet" href="css/main.css">
    <!-- educate icon CSS
		============================================ -->
    <link rel="stylesheet" href="css/educate-custon-icon.css">
    <!-- morrisjs CSS
		============================================ -->
    <link rel="stylesheet" href="css/morrisjs/morris.css">
    <!-- mCustomScrollbar CSS
		============================================ -->
    <link rel="stylesheet" href="css/scrollbar/jquery.mCustomScrollbar.min.css">
    <!-- metisMenu CSS
		============================================ -->
    <link rel="stylesheet" href="css/metisMenu/metisMenu.min.css">
    <link rel="stylesheet" href="css/metisMenu/metisMenu-vertical.css">
    <!-- calendar CSS
		============================================ -->
    <link rel="stylesheet" href="css/calendar/fullcalendar.min.css">
    <link rel="stylesheet" href="css/calendar/fullcalendar.print.min.css">

    <!-- form CSS
		============================================ -->
    <link rel="stylesheet" href="css/form/all-type-forms.css">

    <!-- style CSS
		============================================ -->
    <link rel="stylesheet" href="css/style.css">
    <!-- responsive CSS
		============================================ -->
    <link rel="stylesheet" href="css/responsive.css">
    <!-- modernizr JS
		============================================ -->
    <script src="js/jquery.min.js"></script>

    <script src="js/vendor/modernizr-2.8.3.min.js"></script>
    <script src="js/vue.js"></script>
    <style>
        .modal-dialog {
            width: 680px;
        }

        .pagination {
            margin-top: 0;
            margin-bottom: 0;
        }
    </style>


</head>

<body>
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade
    your browser</a> to improve your experience.</p>
<![endif]-->
<!-- Start Left menu area -->
<div class="left-sidebar-pro">
    <nav id="sidebar" class="">
        <div class="sidebar-header">
            <a href="index.html"><img class="main-logo" src="img/logo/logo.png" alt=""/></a>
            <strong><a href="index.html"><img src="img/logo/logosn.png" alt=""/></a></strong>
        </div>
        <div class="left-custom-menu-adp-wrap comment-scrollbar">
            <nav class="sidebar-nav left-sidebar-menu-pro">
                <ul class="metismenu" id="menu1">
                    <li class="active">
                        <a class="has-arrow" href="index.html">
                            <span class="fa fa-id-card"></span>
                            <span class="mini-click-non">用户信息</span>
                        </a>
                        <ul class="submenu-angle" aria-expanded="true">
                            <li><a href="dataStatistics.html"><span class="mini-sub-pro">图表信息统计</span></a></li>
                            <li><a href="index.html"><span class="mini-sub-pro">用户列表</span></a></li>
                            <li><a href="goodsManager.html"><span class="mini-sub-pro">商品列表</span></a></li>
                            <li><a href="order.html"><span class="mini-sub-pro">订单管理</span></a></li>
                            <li><a href="payPage.html"><span class="mini-sub-pro">支付流水列表</span></a></li>
                            <li><a href="logManagement.html"><span class="mini-sub-pro">日志管理</span></a></li>
                            <li><a href="dataPush.html"><span class="mini-sub-pro">级光推送</span></a></li>

                        </ul>
                    </li>
                    <li>
                        <a title="Landing Page" href="sysUser.html" aria-expanded="false"><span
                                class="fa fa-user-circle-o" aria-hidden="true"></span> <span
                                class="mini-click-non">系统用户</span></a>
                    </li>

                </ul>
            </nav>
        </div>
    </nav>
</div>
<!-- End Left menu area -->
<!-- Start Welcome area -->
<div class="all-content-wrapper">
    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <div class="logo-pro">
                    <a href="index.html"><img class="main-logo" src="img/logo/logo.png" alt=""/></a>
                </div>
            </div>
        </div>
    </div>
    <div class="header-advance-area">
        <div class="header-top-area">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                        <div class="header-top-wraper">
                            <div class="row">
                                <div class="col-lg-1 col-md-0 col-sm-1 col-xs-12">
                                    <div class="menu-switcher-pro">
                                        <button type="button" id="sidebarCollapse"
                                                class="btn bar-button-pro header-drl-controller-btn btn-info navbar-btn">
                                            <i class="fa fa-bars"></i>
                                        </button>
                                    </div>
                                </div>
                                <div class="col-lg-6 col-md-7 col-sm-6 col-xs-12">
                                    <div class="header-top-menu tabl-d-n">
                                        <ul class="nav navbar-nav mai-top-nav">
                                            <li class="nav-item"><a href="#" class="nav-link"></a>
                                            </li>
                                            <li class="nav-item"><a href="#" class="nav-link"></a>
                                            </li>
                                            <li class="nav-item"><a href="#" class="nav-link"></a>
                                            </li>
                                            <li class="nav-item dropdown res-dis-nn">

                                                <div role="menu" class="dropdown-menu animated zoomIn">
                                                    <a href="#" class="dropdown-item">Documentation</a>
                                                    <a href="#" class="dropdown-item">Expert Backend</a>
                                                    <a href="#" class="dropdown-item">Expert FrontEnd</a>
                                                    <a href="#" class="dropdown-item">Contact Support</a>
                                                </div>
                                            </li>
                                            <li class="nav-item"><a href="#" class="nav-link"></a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="col-lg-5 col-md-5 col-sm-12 col-xs-12">
                                    <div class="header-right-info">
                                        <ul class="nav navbar-nav mai-top-nav header-right-menu">
                                            <li class="nav-item">
                                                <a href="#" data-toggle="dropdown" role="button" aria-expanded="false"
                                                   class="nav-link dropdown-toggle">


                                                    <span class="admin-name" id="admin-name">用户管理</span>
                                                    <span class="admin-name2" id="admin-nam2"></span>
                                                </a>
                                                <ul role="menu"
                                                    class="dropdown-header-top author-log dropdown-menu animated zoomIn">
                                                    <li><a href="sysUser.html"><span
                                                            class="edu-icon edu-home-admin author-log-ic"></span><button>管理员信息</button></a>
                                                    <li><a><span
                                                            class="edu-icon edu-settings author-log-ic"></span><button  onclick="loginOut()">切换登录</button></a>
                                                    <li><a><span
                                                            class="edu-icon edu-settings author-log-ic" ></span><button onclick="loginOut()">退出登录</button>
                                                    </a></li>

                                                </ul>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="container-fluid" style="padding: 20px 15px 0 15px;">


            <!-- 首页页面 -->


            <form class="form-inline" onsubmit="javascript: return false;">
                <div class="form-group">
                    <label for="name">信息创建人: </label>
                    <input autocomplete="off" class="form-control" id="name">
                </div>
                <div class="form-group">
                    <label for="title">信息标题: </label>
                    <input autocomplete="off" class="form-control" id="title">
                </div>
                <div class="form-group">
                    <label for="status">发送状态: </label>
                    <select class="form-control" id="status">
                        <option value="-1">全部</option>
                        <option value="1">已发送</option>
                        <option value="0">未发送</option>
                    </select>
                </div>
                <div class="form-group">
                    <label>创建时间: </label>
                    <input class="form-control" readonly autocomplete="off" id="beginRegisterDate"> -
                    <input autocomplete="off" readonly class="form-control" id="endRegisterDate">
                </div>
                <div class="form-group">
                    <button class="btn btn-danger" onclick="querySearch()">搜索</button>
                    <button autocomplete="off" class="btn btn-danger" onclick="resetSearch()">重置</button>
                    <button autocomplete="off" class="btn btn-danger" onclick="showData()">添加</button>
                </div>
            </form>
            <table id="goodsDataTable" class="table table-bordered table-striped"></table>

            <div class="modal" id="addGoodsModal" data-backdrop="static">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button onclick="destoryAddGoodsModal()" class="close">
                                <span>&times;</span>
                            </button>
                            <h3 class="modal-title">发送信息</h3>
                        </div>
                        <div class="modal-body">
                            <form>
                                <input type="hidden" id="imageServerPath01">
                                <div class="form-group">
                                    <label for="title01">信息头</label>
                                    <input class="form-control" autocomplete="off" id="title01" >
                                    <label for="title02">信息内容</label>
                                    <textarea class="form-control" class="form-control" autocomplete="off" id="title02" ></textarea>
                                    <label>推送时间</label>
                                    <input type="radio"  checked value="0" name="test" style="margin-top: 23px;margin-left: 41px">立即发送<br>
                                    <input type="radio"  value="1" name="test" style="margin-top: 5px;margin-left: 100px;margin-bottom: 10px">自定义
                                    <input id="endRegisterDate0" style="width: 153px;height: 32px;margin-left: 25px;background: #cbcfd2">

                                </div>
                            </form>
                        </div>
                        <div class="modal-footer">
                            <button onclick="destoryAddGoodsModal()" class="btn btn-danger">取消</button>
                            <button class="btn btn-success" onclick="sendInformation()">确认</button>
                        </div>
                    </div>
                </div>
            </div>

            <div class="modal" id="showModal" data-backdrop="static">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button onclick="destoryModal()" class="close">
                                <span>&times;</span>
                            </button>
                            <h3 class="modal-title">查看详情</h3>
                        </div>
                        <div class="modal-body">
                            <form>
                                <div class="form-group">
                                    <label for="title03">信息头</label>
                                    <input class="form-control" autocomplete="off" id="title03" disabled >
                                    <label for="title04">信息内容</label>
                                    <textarea class="form-control" class="form-control" autocomplete="off" id="title04" disabled ></textarea>

                                </div>
                            </form>
                        </div>
                        <div class="modal-footer">
                            <button onclick="destoryModal()" class="btn btn-danger">取消</button>
                        </div>
                    </div>
                </div>
            </div>

            <div class="modal" id="showModal0" data-backdrop="static">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button onclick="destoryModal()" class="close">
                                <span>&times;</span>
                            </button>
                            <h3 class="modal-title">不可编辑</h3>
                        </div>
                        <div class="modal-body">
                            <form>
                                <div class="form-group">
                                    <label for="title03">信息头</label>
                                    <input class="form-control" autocomplete="off" id="title05" disabled >
                                    <label for="title04">信息内容</label>
                                    <textarea class="form-control" class="form-control" autocomplete="off" id="title06" disabled ></textarea>

                                </div>
                            </form>
                        </div>
                        <div class="modal-footer">
                            <button onclick="destoryModal()" class="btn btn-danger">取消</button>
                        </div>
                    </div>
                </div>
            </div>

            <div class="modal" id="showModal1" data-backdrop="static">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button onclick="destoryModal0()" class="close">
                                <span>&times;</span>
                            </button>
                            <h3 class="modal-title">可编辑</h3>
                        </div>
                        <div class="modal-body">
                            <form>
                                <input type="hidden" id="Id">
                                <div class="form-group">
                                    <label for="title03">信息头</label>
                                    <input class="form-control" autocomplete="off" id="title07"  >
                                    <label for="title04">信息内容</label>
                                    <textarea class="form-control" class="form-control" autocomplete="off" id="title08" ></textarea>

                                </div>
                            </form>
                        </div>
                        <div class="modal-footer">
                            <button onclick="destoryModal0()" class="btn btn-danger">取消</button>
                            <button class="btn btn-success" onclick="changeInformation0()">确认</button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 尾部页面 -->


        </div>
    </div>
</div>

<!-- jquery
============================================ -->
<script src="js/vendor/jquery-1.12.4.min.js"></script>
<!-- bootstrap JS
============================================ -->
<script src="js/bootstrap.min.js"></script>
<!-- wow JS  动画效果js
============================================ -->
<script src="js/wow.min.js"></script>
<!-- price-slider JS
============================================ -->
<script src="js/jquery-price-slider.js"></script>
<!-- meanmenu JS
============================================ -->
<script src="js/jquery.meanmenu.js"></script>
<!-- owl.carousel JS
============================================ -->
<script src="js/owl.carousel.min.js"></script>
<!-- sticky JS
============================================ -->
<script src="js/jquery.sticky.js"></script>
<!-- scrollUp JS
============================================ -->
<script src="js/jquery.scrollUp.min.js"></script>
<!-- counterup JS
============================================ -->
<script src="js/counterup/jquery.counterup.min.js"></script>
<script src="js/counterup/waypoints.min.js"></script>
<script src="js/counterup/counterup-active.js"></script>
<!-- mCustomScrollbar JS
============================================ -->
<script src="js/scrollbar/jquery.mCustomScrollbar.concat.min.js"></script>
<script src="js/scrollbar/mCustomScrollbar-active.js"></script>
<!-- metisMenu JS
============================================ -->
<script src="js/metisMenu/metisMenu.min.js"></script>
<script src="js/metisMenu/metisMenu-active.js"></script>


<script src="js/sparkline/jquery.sparkline.min.js"></script>
<script src="js/sparkline/jquery.charts-sparkline.js"></script>
<script src="js/sparkline/sparkline-active.js"></script>
<!-- calendar JS
============================================ -->
<script src="js/calendar/moment.min.js"></script>

<script src="js/calendar/fullcalendar.min.js"></script>
<script src="js/calendar/fullcalendar-active.js"></script>
<!-- plugins JS
============================================ -->
<script src="js/plugins.js"></script>
<!-- main JS
============================================ -->
<script src="js/main.js"></script>

<!-- tawk chat JS  聊天系统js
<script src="js/tawk-chat.js"></script>
============================================ -->

<script src="js/data-table/bootstrap-table.js"></script>
<script src="js/data-table/bootstrap-table-zh-CN.js"></script>

<script src="js/notifications/Lobibox.js"></script>
<script src="js/datepicker/bootstrap-datetimepicker.min.js"></script>
<script src="js/datepicker/bootstrap-datetimepicker.zh-CN.js"></script>
<script src="js/jquery.cookie.min.js"></script>

</body>
<script>

    //显示全部信息
    $('#goodsDataTable').bootstrapTable({

        url: 'http://localhost:8080/information',
        method: 'GET',
        columns: [
            // field是返回rows中每个对象的属性名
            {title: '信息创建人', field: 'name', align: 'center'},
            {title: '信息标题', field: 'title'},
            {title: '信息内容', field: 'message',formatter: formatTitle },
            {title: '推送时间', field: 'createTime',formatter: formatTime},
            {title: '发送状态', field: 'status',formatter: formatStatus},
            {title: '操作',formatter: addProcessBtn}
        ],
        queryParams: function (params) {

            var name = $('#name').val();  //获取查询表单name的值
            var title = $('#title').val();
            var status = $('#status').val();
            var begin = $('#beginRegisterDate').val(); //重置name
            var end = $('#endRegisterDate').val(); //重置name

            params.name = name;
            params.title = title;
            params.status = status;
            params.begin = begin;
            params.end = end;
            return params;
        },
        sidePagination: 'server',
        pagination: true, //表示使用分页
    })


    //当内容长度大于30的时候，多余的不显示
    function formatTitle(value) {

        if (value!=null){
            var length = value.length; //获取文本长度
            if(length > 20) {
                return value.substring(0, 20) + '...';
            }
        }

        return value;
    }

    function addProcessBtn(value, row) {

        var Id = row.id;
        var status = row.status;

        return[
            '<button onclick="getInformation(' + Id + ')" class="btn btn-danger btn-xs">查看详情</button>&nbsp&nbsp;',
            '<button onclick="changeInformation(' + Id + ',\''+status+'\')" class="btn btn-primary btn-xs">编辑</button>'
        ].join("")

    }

    // 格式化日期
    function formatTime(value) {
        return moment(value).format('YYYY-MM-DD HH:mm:ss')
    }

    function formatStatus(value, rows) {
        if (value ==0){
            return '<span class="label label-warning">未发送</span>'
        }else if (value ==1){
            return '<span class="label label-success">已发送</span>'

        }

    }

    // 搜索
    function querySearch() {
        $('#goodsDataTable').bootstrapTable('refresh');
    }

    function resetSearch() {
        $('#name').val(''); //重置name
        $('#title').val(''); //重置性别
        $('#status').val('-1'); //重置状态
        $('#beginRegisterDate').val('');
        $('#endRegisterDate').val('');
        querySearch();
    }

    // 隐藏模态框
    function destoryAddGoodsModal() {

        // var value = $('input[name="test"]:checked').val();
        $('#addGoodsModal').modal('hide');
        $('#title01').val('');
        $('#title02').val('');
        $("[name='test'][value='0']").prop("checked", "checked");
        $('#endRegisterDate0').val('');
    }


    function showData() {
        $('#addGoodsModal').modal('show');
        var value = $('input[name="test"]:checked').val();
    }

    $('#beginRegisterDate, #endRegisterDate,#endRegisterDate0').datetimepicker({
        // 格式化 yyyy-mm-dd hh:ii:ss 年-月-日 时-分-秒
        // minDate:'%y-%M-%d %H-%m-%s',
        format: 'yyyy-mm-dd hh:ii:ss'
        // format: 'yyyy-MM-dd HH:mm:ss'
    })

    function sendInformation(){

        var title = $('#title01').val();  //获取查询表单name的值

        var message = $('#title02').val();

        var dateTime;

        var value = $('input[name="test"]:checked').val();

        if (value == '0'){
            dateTime= null;
        }else if (value == '1'){
            dateTime= $('#endRegisterDate0').val();
        }

        console.log(dateTime);

        $.ajax({
            url: 'http://localhost:8080/information',
            data: {
                title:title,
                message:message,
                dateTime:dateTime,
            },
            dataType: 'json',
            type: 'post',
            success: function(_data) {
                // 表示删除成功，更新表格
                if(_data.code > 0) {
                    $('#goodsDataTable').bootstrapTable('refresh');
                    destoryAddGoodsModal();
                }else { // 删除失败，给用户一个提示

                }
            }
        })


    }

    function getInformation(Id) {

        $.ajax({
            url: 'http://localhost:8080/information/'+Id,
            dataType: 'json',
            type: 'get',
            success: function(_data) {
                $('#title03').val(_data.title);
                $('#title04').val(_data.message);
            }
        })


        $('#showModal').modal('show');

    }

    //隐藏查看详情
    function destoryModal(){

        $('#showModal').modal('hide');
        $('#showModal0').modal('hide');

    }

    function changeInformation(Id,status) {

           var id01 =$('#Id').val(Id);

           if (status == '1'){
               $.ajax({
                   url: 'http://localhost:8080/information/'+Id,
                   dataType: 'json',
                   type: 'get',
                   success: function(_data) {
                       $('#title05').val(_data.title);
                       $('#title06').val(_data.message);
                   }
               })
               $('#showModal0').modal('show');

           }else{
               $.ajax({
                   url: 'http://localhost:8080/information/'+Id,
                   dataType: 'json',
                   type: 'get',
                   success: function(_data) {
                       $('#title07').val(_data.title);
                       $('#title08').val(_data.message);
                   }
               })
                 $('#showModal1').modal('show');

           }
    }
    function destoryModal0(){
        $('#showModal1').modal('hide');
    }

    function changeInformation0(){

        var title = $('#title07').val();
        var message= $('#title08').val();
        var id = $('#Id').val();


        let param = {
                title:title,
                message:message,
                id:id
            };

        $.ajax({
            url: 'http://localhost:8080/information',
            data: JSON.stringify(param),
            contentType:"application/json",
            dataType: 'json',
            type: 'put',
            success: function(_data) {
                // 表示删除成功，更新表格
                if(_data.code > 0) {
                    alert("编辑成功");
                    $('#goodsDataTable').bootstrapTable('refresh');
                    destoryModal0();
                }else { // 删除失败，给用户一个提示

                }
            }
        })

    }

    // <input class="form-control Wdate"
    // style="height: 36px;width: 150px;display: inline-block;"
    // onclick="WdatePicker({dateFmt:'yyyy-M-d H:mm:ss',minDate:'%y-%M-%d %H-%m-%s',readOnly:true})"
    // autocomplete="off"
    // id="MessageTime">

    function loginOut(){

        $.ajax({
            url:'http://localhost:8080/sysUser/loginOut',
            method:'get',
            success:function (_data) {
                alert(_data.msg);
                $.cookie('frontedUsername','',path='/');
                window.location="/shop/login.html";
            }

        })
    }
    $('#admin-name').hide();
    $('#admin-nam2').html('欢迎你'+$.cookie('frontedUsername'));
</script>
</html>